<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sessionStorage</title>
</head>
<body>
    <h2>sessionStorage</h2>
    <h1>localStorage和sessionStorage统称为webStorage，存储大小都是5m左右，不同浏览器可能不一样,浏览器通过window.localStorage和window.sessionStorage来实现本地存储</h1>
    <h1>sessionStorage会话存储，会话结束了数据自然要清空，关闭浏览器数据会消失</h1>
    <button onclick = "saveDate()">点击我存储一个数据</button>
    <button onclick = "readDate()">点击我读取一个数据</button>
    <button onclick = "deleteDate()">点击我删除一个数据</button>
    <button onclick = "deleteAllDate()">点击我清空数据</button>

    <script>
        function saveDate(){
                // 我们往sessionStorage里面放值
                let x = {
                    name:'张三',
                    age:18
                }
                sessionStorage.setItem('msg','你好我是某某')
                sessionStorage.setItem('msg2',JSON.stringify(x))
                // 这个setItem的第二个参数就是值，如果你不是string类型，它一定会给你调用toString方法，这种会导致对象变成这样[object Object]
                // 所以别直接传，变成字符串再传JSON.stringify(x)
            }
        
        function readDate(){
            let a = sessionStorage.getItem('msg')
            console.log(a)
        }
        function deleteDate(){
            sessionStorage.removeItem('msg')
        }
        function deleteAllDate(){
            sessionStorage.clear()
        }
    </script>
</body>
</html>